<template>
  <div :style="$attrs.style" :class="$attrs.class">
    <!-- <div v-if="isShowOperatorRow" :class="'operator-row'">
      <span class="left">
        <slot name="leftBtnSlot" />
        <el-button-group v-if="leftBtns.length > 0" style="margin-right: 6px;">
          <el-button
            v-for="item in leftBtns"
            :key="item.key"
            :size="item.size || 'small'"
            :disabled="item.disabled"
            :loading="item.loading"
            :icon="item.icon"
            @click="handleOperatorBtnClick(item.key)"
          >
            {{ item.title || item.key }}
          </el-button>
        </el-button-group>
      </span>
      <span class="right">
        <slot name="rightBtnSlot" />
        <el-button
          v-if="rightBtns.search"
          title="筛选"
          style="margin-left: 6px;"
          @click="handleOperatorBtnClick('search')"
        >
          <svg-icon :name="'workbench'" color="gray" size="20px" class="item-icon" />
        </el-button>
        <el-button-group style="margin-left: 6px;">
          <el-button
            v-if="rightBtns.refresh"
            title="刷新"
            @click="handleOperatorBtnClick('refresh')"
          >
            <svg-icon :name="'workbench'" color="gray" size="20px" class="item-icon" />
          </el-button>
        </el-button-group>
      </span>
    </div>
    <el-table
      ref="tableRef"
      v-bind="{...$attrs, style: '', class: ''}"
      :data="data"
      :height="isShowOperatorRow ? tableHeight - 36 : tableHeight"
    >
      <template v-for="item in tableColumns" :key="item.key">
        <el-table-column
          v-bind="item"
          :prop="item.key"
          :label="item.title"
        >
          <template v-if="item.render" #default="params">
            <yfRender :toRender="item.render" :params="params" />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <yfDialog
      v-model="show"
      :footerBtn="{ cancel: true, ok: true }"
    /> -->
  </div>
</template>

<script lang="ts">
export default { name: 'YfTable' }
</script>

<script setup lang="ts">
// import { ref } from 'vue';
// import { yfRender, yfDialog } from '@/components';

// import { tableProps, tableEmits } from './table';
// import { useTable } from './use-table'
// import { ElTable } from 'element-plus'

/* ****** 组件定义 ****** */
// const props = defineProps(tableProps);
// defineEmits(tableEmits);

// 绑定组件ref  暂未处理
// const tableRef = ref<InstanceType<typeof ElTable>>()
// tableRef.value?.clearSelection()

// const {
//   show,
//   data,
//   isShowOperatorRow,
//   handleOperatorBtnClick,
// } = useTable(props, tableRef)


/* ****** 向外暴露的属性 ****** */
// defineExpose({ refresh: () => handleOperatorBtnClick('refresh') });
</script>

<style lang="scss" scoped>

.operator-row {
  font-size: 0; // 处理按钮之间因为换行导致的默认间距问题
  overflow: hidden;
  padding: 6px 0;

  
  :deep(.el-button) {
    // color: red;
    padding: 0 6px !important;
    height: 24px !important;
  }

  // .h-radio-group-button .h-radio-wrapper {
  //   height: 24px !important;
  //   line-height: 22px !important;
  //   padding: 0 8px !important;
  // }

  // .h-checkbtn-wrapper {
  //   height: 24px !important;
  //   line-height: 22px !important;
  //   padding: 0 12px !important;
  // }

  .left {

    // button.operatorBtn {
    //   background: #fff;
    //   border: solid 1px #11a0f8;
    //   color: #1388e6;
    // }

    // .operatorBtn.h-btn:hover {
    //   border-color: #1388e6;
    //   border-width: 2px;
    // }
  }

  .right {
    float: right;

    // .mode-dropdown {
    //   margin-left: -1px;

    //   button {
    //     width: 20px;
    //     padding: 2px !important;
    //     border-bottom-left-radius: 0 !important;
    //     border-top-left-radius: 0 !important;
    //   }

    //   .h-select-dropdown {
    //     // right: 0 !important;
    //     // left: calc(100vw - 160px) !important;
    //     width: 160px !important;
    //   }
    // }
  }
}
</style>
